<template>
  <div>
    <div class="title flex items-center justify-between">
      <div class="flex  items-center">
        <div class="text-[20px]">
          数据看板
        </div>

        <div class="text-[#999999] ml-[10px]">
          数据信息实时更新中哦
        </div>
      </div>

      <div class="tab flex">
        <div class="tab-li flex-center cursor-pointer transition"
             :class="`${ activeTab1 == index ? 'active' : '' }`"
             v-for="(item,index) in tab1" :key="index"
             @click="handleBtnClick({type:'tab',index})"
        >
          {{ item.name }}
        </div>
      </div>

    </div>

    <div class="module mt-[20px] flex justify-between zzw">
      <el-card v-for="(item,index) in activeTab1 == 0 ? modules0 : modules1" :key="index">
        <div class="w-[280px] h-[140px] rounded-[8px] module-li relative px-[18px] py-[18px]">
          <div class="flex items-center">
            <div class="bg w-[36px] h-[36px] mr-[10px]"
                 :style="`background-image:url(${ item.icon })`">

            </div>

            <div>
              <div class="text-[16px]">{{ item.name }}</div>
              <div class="text-[#999999] text-[12px]" v-if="activeTab1 == 0">
                广告（ROI)：${{ data[item.spend] || 0 }}({{ data[item.roi] || 0 }})
              </div>
            </div>
          </div>


          <div class="progress mt-[18px] w-[248px] h-[8px] bg-[#EFEFEF] rounded-[8px]"
               v-if="activeTab1 == 0">
            <div class="h-[8px] rounded-[8px]"
                 v-style="`background:linear-gradient(to right, ${ item.bg });width:${    ((  data[item.code] || 0) /(data[item.code1] || 1) )*248 }px;`">

            </div>
          </div>

          <div class="mt-[18px] flex justify-between" v-if="activeTab1 == 0">
            <div class="text-[#666666]">有效订单：<span
              class="text-[#000] text-[18px]">{{ data[item.code] || 0 }}</span>
            </div>

            <div class="text-[#666666]">总订单：<span
              class="text-[#000] text-[18px]">{{ data[item.code1] || 0 }}</span>
            </div>

          </div>


          <div class="mt-[18px]" v-if="activeTab1 == 1">
            <div class="text-[#666666]">营业额：<span
              class="text-[#000] text-[18px]">{{ data[item.code] || 0 }}元</span>
            </div>

            <div class="text-[#3721FF]">客单价：<span
              class="text-[#999999] text-[18px]">{{ data[item.code1] || 0 }}</span>
            </div>

          </div>


          <div  v-if="activeTab1 == 1" class="w-[80px] h-[62px] bg absolute bottom-[10px] right-[10px]" :style="`background-image:url(${ item.icon1 })`">

          </div>


        </div>
      </el-card>

    </div>

  </div>
</template>
<script setup lang="ts">
import Sortable from 'sortablejs';

import {getOrderRoi, getBusinessAnslysis} from "@/api/home";

const modules0 = ref([
  {
    name: "今日数据",
    icon: "https://img.alicdn.com/imgextra/i1/801089336/O1CN019cMvUX2IpwkiVAs2s_!!801089336.png",
    bg: "#FF8800,#FFB116",
    code: "validCount",
    code1: "totalCount",
    spend: "todaySpend",
    roi: "todayRoi"
  },
  {
    name: "昨日数据",
    icon: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01QXmrla2IpwkkgWwx1_!!801089336.png",
    bg: "#00C52E,#71E675",
    code: "validCountYesterday",
    code1: "totalCountYesterday",
    spend: "yesterdaySpend",
    roi: "yesterdayRoi"
  },
  {
    name: "本周数据",
    icon: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01NIfNSe2IpwkkTzxes_!!801089336.png",
    bg: "#4C21FF,#8F50FF",
    code: "validCountWeek",
    code1: "totalCountWeek",
    spend: "weekSpend",
    roi: "weekRoi"
  },
  {
    name: "本月数据",
    icon: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01IZUuZq2Ipwkky9GeL_!!801089336.png",
    bg: "#00D0F1,#16FFFF",
    code: "validCountMonth",
    code1: "totalCountMonth",
    spend: "monthSpend",
    roi: "monthRoi"
  }
])

const modules1 = ref([
  {
    name: "今日数据",
    icon: "https://img.alicdn.com/imgextra/i1/801089336/O1CN019cMvUX2IpwkiVAs2s_!!801089336.png",
    icon1: "https://img.alicdn.com/imgextra/i1/801089336/O1CN012bT0Wn2IpwkjMBRi4_!!801089336.png",
    bg: "#FF8800,#FFB116",
    code: "turnover",
    code1: "customerPrice",

  },
  {
    name: "昨日数据",
    icon: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01QXmrla2IpwkkgWwx1_!!801089336.png",
    icon1: "https://img.alicdn.com/imgextra/i3/801089336/O1CN011kS2YX2Ipwkk0jlwZ_!!801089336.png",
    bg: "#00C52E,#71E675",
    code: "turnoverYesterday",
    code1: "customerPriceYesterday",

  },
  {
    name: "本周数据",
    icon: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01NIfNSe2IpwkkTzxes_!!801089336.png",
    icon1: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01JcY1Wj2IpwkisM1BN_!!801089336.png",
    bg: "#4C21FF,#8F50FF",
    code: "turnoverWeek",
    code1: "customerPriceWeek",

  },
  {
    name: "本月数据",
    icon: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01IZUuZq2Ipwkky9GeL_!!801089336.png",
    icon1: "https://img.alicdn.com/imgextra/i1/801089336/O1CN01tVn1pD2IpwkjMCmsj_!!801089336.png",
    bg: "#00D0F1,#16FFFF",
    code: "turnoverMonth",
    code1: "customerPriceMonth",

  }
])


const activeTab1 = ref(0)
const tab1 = ref([
  {
    name: "订单/ROI"
  },
  {
    name: "营业分析"
  }
])

const data = ref({})

const queryData = async () => {
  if (activeTab1.value == 0) {
    let res = await getOrderRoi();
    data.value = res;
  } else {
    let res = await getBusinessAnslysis();
    data.value = res;
  }

}


const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  tab({index}) {
    if (activeTab1.value != index) {
      activeTab1.value = index;
      queryData();
    }
  }
}

const initSortable = () => {
  let listbox = document.querySelector(`.zzw`);

  console.log(listbox,"=====lllllll")

  new Sortable(listbox, {
    handle: '.el-card', // handle's class
    animation: 150,
    // 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
    onEnd: ({newIndex, oldIndex}) => {

      // if (typeof newIndex === 'number' && typeof oldIndex === 'number') {
      //   const list = deepCopy(episodeList.value);
      //   const currentRow = list.splice(oldIndex, 1)[0]!;
      //   list.splice(newIndex, 0, currentRow);
      //   episodeList.value = [];
      //   nextTick(async () => {
      //     episodeList.value = list;
      //     await editEpisodeAll({
      //       dramaId: props.dramaId,
      //       episodeList: episodeList.value
      //     });
      //   });
      // }
    }
  });
};


onMounted(() => {
  queryData();

  // setTimeout(()=>{
  //   initSortable();
  // },3000)
})

</script>
<style lang="scss" scoped>
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}

.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }


    &:nth-last-of-type(1) {
      border-left: solid 1px rgba(0, 0, 0, 0);
      border-radius: 0 8px 8px 0;
    }


    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

  }

}
</style>
